<template>
	<view class="option-menu mb-3 theme-shadow" @click="handleClick">
		<view class="menu-icon">
			<image src="../../../static/images/mission_1.png" ></image>
		</view>
		
		<view class="menu-value">
			<view class="large-text text-black text-halfbold mb-1 text-ellipsis-1">
				{{ props.title }}
			</view>
			<view class="small-text text-gray text-ellipsis-1">
				{{ props.content }}
			</view>
		</view>
		
		<view class="menu-rightraw text-gray">
			<view class="small-text ">
				<view class="mission-status" :class="'mission-status_' + status">
					{{ statusText }}
				</view>
				<view class="mission-date">{{ getDate }}</view>
			</view>
			<view class="lg cuIcon-right"></view>
		</view>
	</view>
</template>

<script setup lang="ts">
// import { getCurrentInstance } from "vue"
// const { proxy: { $Router } } = getCurrentInstance()
import { router } from "@/router"
import { computed } from "vue";
const props = defineProps({
	id: {
		type: Number,
		default: 0
	},
	title: {
		type: String,
		default: ""
	},
	content: {
		type: String,
		default: ""
	},
	date: {
		type: String,
		default: ""
	},
	status: {
		type: String,
		default: "1"
	}
})

const getDate = computed(() => {
	return (new Date(props.date)).format('MM-dd')
})

const handleClick = ():void => {
	// console.log(props.page)
	router.push("/pages/mission/mission?mission_id=" + props.id)
		.catch(err => {
			console.log(err)
		})
}
const statusMap = {
	"1": "未开始",
	"2": "未确认",
	"3": "已确认",
	"4": "进行中",
	"5": "已完成",
	"7": "已忽略",
}
const statusText = computed(() => {
	return statusMap[props.status] ? statusMap[props.status] : "未知"
})

</script>

<style lang="stylus" scoped>
.option-menu
	background-color #fff
	box-sizing: border-box
	padding 40rpx
	display: flex
	align-items: center
	// height 188rpx
	border-radius 12rpx
	.menu-icon
		width: 44rpx
		height: 84rpx
		font-size 44rpx
		margin-right: 40rpx
		margin-left: 20rpx
		image
			width: 44rpx
			height: 44rpx
	.menu-value
		width: 330rpx
		// padding-left 40rpx
	.menu-rightraw
		width: 160rpx
		font-size: 36rpx
		display: flex
		align-items: center
		justify-content: flex-end
.mission-date
	text-align: center
.mission-status_1, .mission-status_2, .mission-status_3, .mission-status_4
	text-align: center
	color: #8f0200
.mission-status_5
	text-align: center
	color: #438f11
.mission-status_6
	text-align: center
	color: #7d857f
	
</style>